<template>
  <div class="lego-template-list-wrap-box">
    <div class="template-list-box-new">
      <div v-for="item in props.templateList" :key="item.id" class="card-box-item">
        <template-card
          :card-data="item"
          :width="props.cardWidth"
          :height="props.cardHeight"
          @to-design="toDesignDetail"
        >
        </template-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import TemplateCard from './TemplateCard.vue';

  const props = defineProps<{
    templateList: any;
    cardWidth: string;
    cardHeight: string;
  }>();
  // 跳转至详情页
  const router = useRouter();
  const toDesignDetail = (cardData: { id: any; categoryId: any }) => {
    router.push({
      path: '/legoDesigner',
      query: {
        templateId: cardData.id,
        source: 'template'
      }
    });
  };
</script>
<style lang="scss" scoped>
  .lego-template-list-wrap-box {
    display: flex;
    flex-direction: column;
    .template-list-box-new {
      display: flex;
      flex-wrap: wrap;
      padding: 30px 0 0 0;
      .card-box-item {
        &:not(:nth-child(4n)) {
          margin-right: 33px;
        }
      }
    }
  }
</style>
